<template>
    <div class="network-dialog">
        <el-dialog :title="isAdd === 0 ? '新增账号' : isAdd === 1 ? '账号详情' : isAdd === 2 ? '修改账号' : '账号授权'"
            :visible.sync="showDialog" :before-close="handleClose" @update:showDialog="toggleDialog" width="55%">
            <div style="height: 60%;">
                <el-form label-width="12vw" :inline="true" :rules="rules" :model="vpnAccInfo" ref="vpnAccInfo">
                    <el-row v-if="isAdd === 1">
                        <el-col :span="12">
                            <el-form-item label="单位：" prop="unit" v-if="isUpdata">
                                <el-input v-model="vpnAccInfo.unit" v-if="!isDetails"></el-input>
                                <span v-else style="width: 50%;">{{ vpnAccInfo.unit }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="使用人：" prop="person" v-if="isUpdata">
                                <el-input v-model="vpnAccInfo.person" v-if="!isDetails"></el-input>
                                <span v-else>{{ vpnAccInfo.person }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div v-else>
                        <el-form-item label="单位：" prop="unit" v-if="isUpdata">
                            <el-input v-model="vpnAccInfo.unit" v-if="!isDetails"></el-input>
                            <span v-else style="width: 50%;">{{ vpnAccInfo.unit }}</span>
                        </el-form-item>
                        <el-form-item label="使用人：" prop="person" v-if="isUpdata">
                            <el-input v-model="vpnAccInfo.person" v-if="!isDetails"></el-input>
                            <span v-else>{{ vpnAccInfo.person }}</span>
                        </el-form-item>
                    </div>
                    <el-row v-if="isAdd === 1">
                        <el-col :span="12">
                            <el-form-item label="使用人部门：" prop="department" v-if="isUpdata">
                                <el-input v-model="vpnAccInfo.department" v-if="!isDetails"></el-input>
                                <span v-else>{{ vpnAccInfo.department }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="使用人手机：" prop="phone" v-if="isUpdata">
                                <el-input v-model.number="vpnAccInfo.phone" v-if="!isDetails"></el-input>
                                <span v-else>{{ vpnAccInfo.phone }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div v-else>
                        <el-form-item label="使用人部门：" prop="department" v-if="isUpdata">
                            <el-input v-model="vpnAccInfo.department" v-if="!isDetails"></el-input>
                            <span v-else>{{ vpnAccInfo.department }}</span>
                        </el-form-item>
                        <el-form-item label="使用人手机：" prop="phone" v-if="isUpdata">
                            <el-input v-model.number="vpnAccInfo.phone" v-if="!isDetails"></el-input>
                            <span v-else>{{ vpnAccInfo.phone }}</span>
                        </el-form-item>
                    </div>
                    <el-row v-if="isAdd === 1">
                        <el-col :span="12">
                            <el-form-item label="使用人身份证号：" prop="idCard" v-if="isUpdata">
                                <el-input v-model.number="vpnAccInfo.idCard" v-if="!isDetails"></el-input>
                                <span v-else>{{ vpnAccInfo.idCard }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="账号：" prop="accountName" v-if="isUpdata">
                                <el-input v-model.number="vpnAccInfo.accountName" v-if="!isDetails"></el-input>
                                <span v-else>{{ vpnAccInfo.accountName }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div v-else>
                        <el-form-item label="使用人身份证号：" prop="idCard" v-if="isUpdata">
                            <el-input v-model.number="vpnAccInfo.idCard" v-if="!isDetails"></el-input>
                            <span v-else>{{ vpnAccInfo.idCard }}</span>
                        </el-form-item>
                        <el-form-item label="账号：" prop="accountName" v-if="isUpdata">
                            <el-input v-model.number="vpnAccInfo.accountName" v-if="!isDetails"></el-input>
                            <span v-else>{{ vpnAccInfo.accountName }}</span>
                        </el-form-item>
                    </div>
                    <el-row v-if="isAdd === 1">
                        <el-col :span="12">
                            <el-form-item label="密码：" prop="password" v-if="isUpdata">
                                <el-input v-model="vpnAccInfo.password" v-if="!isDetails"></el-input>
                                <span v-else>{{ vpnAccInfo.password }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属服务ID:" prop="vpnId" v-if="isUpdata">
                                <el-select v-model="selectID" placeholder="VPN服务ID" @change="selectIDList"
                                    v-if="!isDetails">
                                    <el-option v-for="( item, index ) in  idList " :key="index" :label="item.vpnserviceId"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                                <span v-else>{{ vpnAccInfo.vpnserviceId }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div v-else>
                        <el-form-item label="密码：" prop="password" v-if="isUpdata">
                            <el-input v-model="vpnAccInfo.password" v-if="!isDetails"></el-input>
                            <span v-else>{{ vpnAccInfo.password }}</span>
                        </el-form-item>
                        <el-form-item label="所属服务ID:" prop="vpnId" v-if="isUpdata">
                            <el-select v-model="selectID" :placeholder="selectID ? 'selectID' : 'VPN服务ID'"
                                @change="selectIDList" v-if="!isDetails">
                                <el-option v-for="( item, index ) in  idList " :key="index" :label="item.vpnserviceId"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <span v-else>{{ vpnAccInfo.vpnserviceId }}</span>
                        </el-form-item>
                    </div>
                    <el-form-item label="生效时段:" prop="validTime">
                        <div class="date_box" v-if="!isDetails">
                            <el-date-picker v-model="vpnAccInfo.validTime" type="datetimerange" :clearable="true"
                                align="right" @change="changeRuleDate($event)" :default-time="['12:00:00']"
                                range-separator="至" :start-placeholder="startTime"
                                :end-placeholder="endTime"></el-date-picker>
                            <i class="el-icon-date data_icon"></i>
                        </div>
                        <span v-else>{{ vpnAccInfo.validTime }}</span>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="isAdd !== 1" type="primary" @click="vpnAccInfoAdd('vpnAccInfo')">确定</el-button>
                <el-button @click="handleClose()">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { vpnAccountList, getIdList, vpnAccountauthorize, vpnAccUpdate } from '@/api/vpnManage/vpnManage.js'
export default {
    data() {
        return {
            vpnAccInfo: {
                unit: '',
                phone: '',
                department: '',
                phone: '',
                idCard: '',
                accountName: '',
                password: '',
                vpnId: '',
                validTime: ''
            },
            dateRange: ['2023-01-01 00:00 ', '2023-01-01 00:00'],
            showAddSegmentDialog: '',
            rules: {
                unit: [
                    { required: true, message: "请填写单位", trigger: "blur" },
                ],
                person: [
                    { required: true, message: "请填写使用人", trigger: "blur" },
                ],
                department: [
                    { required: true, message: "请填写使用人部门", trigger: "blur" },
                ],
                phone: [
                    { required: true, message: "请填写使用人手机", trigger: "blur" },
                ],
                idCard: [
                    { required: true, message: "请填写使用人身份证号", trigger: "blur" },
                ],
                accountName: [
                    { required: true, message: "请填写账号", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请填写密码", trigger: "blur" },
                ],
                selectID: [
                    { required: true, message: "请选择所属服务ID", trigger: "blur" }
                ],

                validTime: [
                    { required: true, message: "请选择生效时段", trigger: "blur" }
                ],
            },
            vpntimeLIst: '',
            idList: [],
            pla: 'VPN服务ID',
            selectID: '',
            startTime: '2023-01-01 00:00:00',
            endTime: '2023-01-01 00:00:00',
        };
    },
    components: {},
    props: {
        //弹窗显、隐
        showDialog: {
            type: Boolean,
            default: false,
        },

        isAdd: {},
        vpnDetailList: {},
        isUpdata: {},
        vpnIdDel: {},
        isModify: {},
        isDetails: {},
        accountList: {},
    },
    inject: ['updata'],
    methods: {
        // 弹窗关闭
        handleClose() {
            this.toggleDialog();
            this.updata()
        },
        toggleDialog(visible = false) {
            this.$emit("update:showDialog", visible);
        },
        submitForm(formName) {
            this.$refs[formName].vpnAccInfo.resourceInfoList((valid) => {
                if (valid) {
                    this.operateIpAddress();
                } else {
                    return false;
                }
            });
        },
        async operateIpAddress() {
            let methods = this.isAdd ? addIPAddress : updateIPAddress;
            const result = await methods({ ...{ id: 0 }, ...this.form });
            this.$message({
                type: "success",
                message: result.msg,
            });
            this.$emit("updateList")
            this.handleClose();
        },
        //确定按钮
        async vpnAccInfoAdd(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {

                    if (this.isUpdata === false && this.vpntimeLIst) {
                        const authorizeAccountBo = {
                            id: this.vpnIdDel,
                            validTime: this.vpntimeLIst
                        }
                        const result = await vpnAccountauthorize(authorizeAccountBo)
                        if (result.code === 200) {
                            this.$message({
                                message: '账号授权成功',
                                type: 'success'
                            });
                            this.handleClose()
                            this.updata()
                        }
                    } else if (this.vpntimeLIst && this.isAdd === 0) {
                        this.vpnAccInfo.vpnId = this.selectID;
                        this.vpnAccInfo.validTime = this.vpntimeLIst
                        const result = await vpnAccountList(this.vpnAccInfo)
                        if (result.code === 200) {
                            this.$message({
                                message: '账号新增成功',
                                type: 'success'
                            });

                        }
                        this.handleClose()
                        this.updata()
                    } else if (this.isAdd === 2) {
                        this.vpnAccInfo.validTime = this.startTime + '至' + this.endTime
                        if (!this.vpnAccInfo.validTime) {
                            this.vpnAccInfo.validTime = this.vpntimeLIst
                        }
                        const result = await vpnAccUpdate(this.vpnAccInfo)
                        if (result.code === 200) {
                            this.$message({
                                message: '账号修改成功',
                                type: 'success'
                            });
                        }
                        this.handleClose()
                        this.updata()
                    }
                } else {
                    return false;
                }
            })

        },

        //生效时间
        changeRuleDate(value) {
            function msToDate(msec) {
                let datetime = new Date(msec);
                let year = datetime.getFullYear();
                let month = datetime.getMonth();
                let date = datetime.getDate();
                let hour = datetime.getHours();
                let minute = datetime.getMinutes();
                let second = datetime.getSeconds();

                let result1 = year +
                    '-' +
                    ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                    '-' +
                    ((date + 1) < 10 ? '0' + date : date) +
                    ' ' +
                    ((hour + 1) < 10 ? '0' + hour : hour) +
                    ':' +
                    ((minute + 1) < 10 ? '0' + minute : minute) +
                    ':' +
                    ((second + 1) < 10 ? '0' + second : second);

                let result2 = year +
                    '-' +
                    ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                    '-' +
                    ((date + 1) < 10 ? '0' + date : date);

                let result = {
                    hasTime: result1,
                    withoutTime: result2
                };

                return result;
            }
            const kaishi = msToDate(value[0]).hasTime;//2021-08-15 9:15:00
            const jieshu = msToDate(value[1]).hasTime;//2021-08-15 9:15:00
            this.vpntimeLIst = kaishi + '至' + jieshu

        },
        async getIDlist() {
            let result = await getIdList()
            this.idList = result.data
        },
        selectIDList(e) {
            this.vpnAccInfo.valid = e
            this.selectID = e
        }
    },
    //确定添加
    created() {
        this.getIDlist()
        console.log(this.isAdd);
        if (this.isAdd === 1) {
            this.rules = {}
        }

        if (this.accountList) {
            this.vpnAccInfo = this.accountList
            this.selectID = this.accountList.vpnserviceId
            const timeList = this.accountList.validTime.split('至')
            this.startTime = timeList[0]
            this.endTime = timeList[1]
        }
    }

};
</script>
<style lang="scss" scoped>
.searchHeight {
    height: calc(100% - 54px) !important;
}

.search-icon {
    margin-left: 30px !important;
}

::v-deep .el-upload {
    text-align: left;
}

::v-deep .el-upload div {
    margin: 10px 0;
}

.pagination-container {
    /* background: #fff; */
    padding: 32px 16px;
}

.pagination-container.hidden {
    display: none;
}

.el-date-editor {
    width: 450px !important;
}

.el-icon-date:before {
    margin-left: -33px;
    content: "";
}



.el-date-editor {
    position: relative;
}

::v-deep .el-picker-panel {
    width: 715px;
}



::v-deep .el-input--medium .el-input__inner {
    height: 28px;
}

::v-deep.el-icon-arrow-up:before {
    margin-left: 32px;
}

::v-deep .el-dialog__body {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
}
</style>